<template>
  <div>
    <el-card class="box-card">
      <div >
        <p>筛选信息</p>
      </div>
    <el-form ref="searchFormRef" :model="searchForm">
      <el-form-item label="文章状态：">
        <el-radio-group v-model="searchForm.status" @change="getArticleList()">
            <el-radio label>全部</el-radio>
            <el-radio  label="0">草稿</el-radio>
            <el-radio  label="1">待审核</el-radio>
            <el-radio  label="2">审核通过</el-radio>
            <el-radio  label="3">审核失败</el-radio>
            <el-radio  label="4">已删除</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="频道列表：">
        <el-select v-model="searchForm.channel_id" placeholder="请选择" clearable @change="getArticleList()">
          <el-option v-for="item in channelList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="时间选择：">
        <el-date-picker
        clearable
          v-model="timetotime"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary">查询</el-button>
      </el-form-item>
    </el-form>
    </el-card>

    <el-card class='box-card2'>
      <div>
          <span>共找到 {{tot}}条符合条件的内容</span>
      </div>
      <hr>
       <el-table :data="articleList" style="width: 100%">
          <el-table-column label="图标" width="180">
          <img :src="stData.row.cover.images[0]" width="150" height="150" alt="" slot-scope="stData">
          </el-table-column>
          <el-table-column prop="title" label="标题" width="280">
          </el-table-column>
          <el-table-column   label="状态">
            <template slot-scope="stData">
                <el-tag v-if="stData.row.status==0">草稿</el-tag>
                <el-tag v-else-if="stData.row.status==1" type="success">待审核</el-tag>
                <el-tag v-else-if="stData.row.status==2" type="info">审核通过</el-tag>
                <el-tag v-else-if="stData.row.status==3" type="warning">审核失败</el-tag>
                <el-tag v-else type="danger">已删除</el-tag>
            </template>

          </el-table-column>
          <el-table-column label='发布时间' prop='pubdate'></el-table-column>
          <el-table-column label='操作'>
            <template slot-scope="stData">
                 <el-button type='primary' size='mini' @click="$router.push(`/articleedit/${stData.row.id}`)">修改</el-button>
                 <el-button type='primary' size='mini' @click="del(stData.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      <!-- 分页 -->
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="searchForm.page"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="searchForm.per_page"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tot">
       </el-pagination>
    </el-card>

</div>

</template>
<script>
export default {
  name: 'ArticleCom',
  watch: {
    // timetotime的成员发生变化随时可以被监测到
    timetotime (newval) {
      // 把newval的两个数组单元获得出来，分别赋予给begin_pubdate和end_pubdate连个成员
      if (newval) {
        this.searchForm.begin_pubdate = newval[0]
        this.searchForm.end_pubdate = newval[1]
      } else {
        this.searchForm.begin_pubdate = ''
        this.searchForm.end_pubdate = ''
      }
      this.getArticleList()
    }
  },
  created () {
    this.getChannelList() // 获取频道信息
    this.getArticleList()
  },

  methods: {
    // 删除文章
    del (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.delete(`/articles/${id}`)
        this.$message.success('删除成功')
        this.getArticleList()
      }).catch(() => {

      })
    },
    // 分页处理
    // 每页显示条数变化
    handleSizeChange (val) {
      this.searchForm.per_page = val
      this.getArticleList()
      // console.log(`每页 ${val} 条`)
    },
    // 页码变换
    handleCurrentChange (val) {
      // 把变换后的页码给searchfrom page
      this.searchForm.page = val
      this.getArticleList()
    },

    // 获得文章列表信息
    getArticleList () {
      // 对参数信息进行过滤处理,删除无用参数
      var cdtData = {}
      for (var i in this.searchForm) {
        if (this.searchForm[i]) {
          cdtData[i] = this.searchForm[i]
        }
      }
      var pro = this.$http.get('/articles', { params: cdtData })
      pro
        .then(result => {
          // console.log(result);
          // 吧获得的信息赋予articlelist
          this.articleList = result.data.data.results
          // console.log(result.data.data.results)
          this.tot = result.data.data.total_count
        })
        .catch(err => {
          console.log('获取文章列表错误' + err)
        })
    },
    // 获取频道列表信息
    getChannelList () {
      var pro = this.$http.get('/channels')
      pro
        .then(result => {
          // 把获得好的频道信息赋予给 channelList 成员
          this.channelList = result.data.data.channels
        })
        .catch(err => {
          console.log(err)
        })
    }
  },
  data () {
    return {
      articleList: [],
      searchForm: {
        status: '', // 文章状态
        channel_id: '', // 频道
        begin_pubdate: '', // 开始日期
        end_pubdate: '', // 结束日期
        page: 1, // 当前页码
        per_page: 10 // 10-50之间
      },
      channelList: [],
      tot: 0,
      timetotime: '', // 用于接收 开始和结束日期  大字符串的
      tableData: []
    }
  }
}
</script>

<style lang="less" scoped>
.el-form {
  width: 80%;
  padding: 15px 20px;
  background-color: #fff;
}
.box-card2 {
  margin-top:20px;
}
</style>
